<template>
	<view>
		<view class="singleSelect" v-if="Object.keys(this.ques).length!==0">
			<view>
				<view class="topic">
					<span class="questionNumber"> {{ques[bigQuesNum][smallQuesNum].sort}}、</span>
					<span class="questionType" v-if="ques[bigQuesNum][smallQuesNum].quesType===1">【单选题】</span>
					<span class="questionType" v-if="ques[bigQuesNum][smallQuesNum].quesType===2">【多选题】</span>
					<span class="questionType" v-if="ques[bigQuesNum][smallQuesNum].quesType===3">【判断题】</span>
					<span class="score">（{{ques[bigQuesNum][smallQuesNum].quesScore}}分）</span>
					<span class="questionStem" v-html='ques[bigQuesNum][smallQuesNum].quesContent'></span>
				</view>
				<!-- 单选 -->
				<view v-if="ques[bigQuesNum][smallQuesNum].quesType===1">
					<radio-group @change="radioChange">
						<label class="group"  @click="redioCheck(index)" v-for="(item,index) in ques[bigQuesNum][smallQuesNum].options" :key="index">
							<view>
								<radio class="radio theme" v-if="ques[bigQuesNum][smallQuesNum].options[index]!==''" :value="alphabet[index]" :checked="alphabet[index]===radioValue" />
							</view>
							<view class="text" v-if="ques[bigQuesNum][smallQuesNum].options[index]!==''">{{alphabet[index]}} 、{{ques[bigQuesNum][smallQuesNum].options[index]}}</view>
						</label>
					</radio-group>
				</view>
				<!-- 多选 -->
				<view v-else-if="ques[bigQuesNum][smallQuesNum].quesType===2">
					<checkbox-group @change="checkboxChange">
						<label class="group" @click="checkboxCheck(index)" v-for="(item,index) in ques[bigQuesNum][smallQuesNum].options" :key="index">
							<view>
								<checkbox class="radio theme"  v-if="ques[bigQuesNum][smallQuesNum].options[index]!==''"
								 :value="alphabet[index]" :checked="checkboxValue.some(res=>res===alphabet[index])"></checkbox>
							</view>
							<view v-if="ques[bigQuesNum][smallQuesNum].options[index]!==''">{{alphabet[index]}} 、{{ques[bigQuesNum][smallQuesNum].options[index]}}</view>
						</label>
					</checkbox-group>
				</view>
				<!-- 判断 -->
				<view v-else-if="ques[bigQuesNum][smallQuesNum].quesType===3">
					<radio-group @change="radioChange">
						<label class="group" @click="redioCheck(index)" v-for="(item,index) in ques[bigQuesNum][smallQuesNum].options" :key="index">
							<view>
								<radio class="radio theme" v-if="ques[bigQuesNum][smallQuesNum].options[index]!==''" :value="alphabet[index]" :checked="alphabet[index]===radioValue" />
							</view>
							<view class="text" v-if="ques[bigQuesNum][smallQuesNum].options[index]!==''">{{ques[bigQuesNum][smallQuesNum].options[index]==='Y'?'正确':'错误'}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				single: false,
				multiple: true,
				judge: false,
				hasImage: false,
				currentQues: {},
				alphabet: ['A','B','C','D','E','F','G','K','L','M','N'],
				// current: null,
				myAnswer: '',
				index: null,
				//标记是否被点击
				radioValue: null,
				checkboxValue: []
			}
		},
		props:{
			ques: {
				type: Object
			},
			smallQuesNum: {
				type: Number
			},
			bigQuesNum: {
				type: Number
			}
		},
		onLoad() {
			
		},
		methods:{
			// 单选
			radioChange(evt) {
				console.log(evt.detail.value,'evt.detail.value')
				this.myAnswer = evt.detail.value
				this.$emit("commitAnswer",this.myAnswer,this.ques[this.bigQuesNum][this.smallQuesNum].sort,this.ques[this.bigQuesNum][this.smallQuesNum].quesType)
			},
			//单选自定义选择可取消
			redioCheck(index){
				this.index = index
				if(this.radioValue===this.alphabet[index]) {
				    this.radioValue = null
				}else {
				    this.radioValue = this.alphabet[index]
				}
			},
			// 多选
			checkboxChange(evt){
				console.log(111)
			},
			// 多选
			checkboxCheck(index){
				console.log(21111111)
				this.index = index
				if(this.checkboxValue.some(item=>item==this.alphabet[index])){
					//如果选中就从数组中移除
					this.checkboxValue.forEach((item,num)=>{
						if(item===this.alphabet[index]){
							this.checkboxValue.splice(num,1)
						}
					})
				}else {
					this.checkboxValue.push(this.alphabet[index])
				}
				this.myAnswer = this.checkboxValue.join('|')
				this.$emit("commitAnswer",this.myAnswer,this.ques[this.bigQuesNum][this.smallQuesNum].sort,this.ques[this.bigQuesNum][this.smallQuesNum].quesType)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.singleSelect{
		padding: 40rpx;
		.topic{
			padding-bottom: 20rpx;
		}
		// .img{
		// 	margin: 0 auto;
		// 	padding-top: 40rpx;
		// 	width: 400rpx;
		// 	height: 300rpx;
		// 	.image{
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }
		.group{
			padding-top: 10rpx;
			display: flex;
			.radio{
				// display: inline-block;
				padding-bottom: 20rpx;
			}
			.text{
				// display: inline-block;
			}
		}
	}
</style>
